<template>
	<view class="content">
		<!-- <view class="to_index" @tap="toIndex">去首页</view> -->
		<view class="hbanner" v-if="imgList.length > 0">
			 <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in imgList" :key="index" >
					<view class="hbanner_img">
						<image class="hbanner_img_inner" :src="item" mode=""  @click="clickImg(index)"></image>
					</view>
					
				</swiper-item>
			</swiper>
		</view>
		<view class="hbanner" v-else>
			<image class="hbanner_img" src="../../static/img/10.jpg" mode=""></image>
		</view>
		<view class="hinfo">
			<view class="dtitle">
				<!-- <text v-if="detail.addCopId == 266">整租</text>
				<text v-if="detail.addCopId == 265">合租</text> -->
				<text>{{detail.addCopIdName}}</text>
				-{{detail.buildingName}}
				<text v-if="detail.typeId == 1 && detail.shiCount && detail.tingCount">-{{detail.shiCount}}室{{detail.tingCount}}厅</text>
				-朝{{orientationStr}}
			</view>
			<view class="dprice">
				<!-- <view class="dprice_left">￥{{detail.unitPrice}}/月</view> -->
				<view class="dprice_left" v-if="detail.unitPrice">￥{{detail.unitPrice}}/月</view>
				<view class="dprice_left" v-else>价格:面谈</view>
				<view style="margin-right: 20rpx;">浏览 {{detail.glanceCount}} 次</view>
				<!-- <view class="dprice_right">{{detail.dong}}</view> -->
			</view>
			<view class="d_info">
				<view class="d_info_list">
					<view class="d_info_title">使用面积</view>
					<view class="d_info_number">{{detail.area}}㎡</view>
				</view>
				<view class="d_info_list">
					<view class="d_info_title">朝向</view>
					<view class="d_info_number">{{orientationStr}}</view>
				</view>
				<view class="d_info_list" v-if="detail.typeId == 1 && detail.shiCount && detail.tingCount && detail.wei">
					<view class="d_info_title">户型</view>
					<view class="d_info_number">{{detail.shiCount}}室{{detail.tingCount}}厅{{detail.wei}}卫</view>
				</view>
				<view class="d_info_list" style="border-right: none;">
					<view class="d_info_title">楼层</view>
					<view class="d_info_number">{{detail.floor}}/{{detail.floorTotal}}</view>
				</view>
			</view>
			<view class="hlist_tag">
				<view class="hlist_tag_inner" v-for="(item,index) in highlightsList" :key="index">{{item}}</view>
			</view>
			<!-- <view class="person_info">
				<image class="person_info_img" src="../../static/img/1.jpg" mode=""></image>
				<view class="person_info_center">
					<view class="person_name">王大锤</view>
					<view class="person_desc">认证二房东 <text style="margin-left: 40rpx;">房屋编号：7897987879</text></view>
				</view>
				<image class="right_arrow" src="../../static/img/right.png" mode=""></image>
			</view> -->
		</view>
		<view class="dposition" @tap="toMap">
			<view class="dposition_title">{{detail.buildingName}}-
			<text v-if="detail.dong">{{detail.dong}}</text></view>
			<view class="dposition_info">
				<image class="dposition_info_icon" src="../../static/img/tabbar/info-active.png" mode=""></image>
				<view class="dposition_address">{{detail.address}}</view>
				<image class="dposition_right_arrow" style="width: 40rpx;height: 40rpx;" src="../../static/img/mark_blue.png" mode=""></image>
			</view>
		</view>
		<view class="ddesc">
			<view class="ddesc_title">房源描述</view>
			<view class="ddesc_info">{{detail.mem}}</view>
		</view>
		
		<view class="dlist">
			<view class="dlist_title">小区其他房源</view>
			<view class="hlist" v-for="(house,index) in houseList" @click="toDetail" :data-id=house.id key="index" v-if="house.state == 6">
				<image class="hlist_img" v-if="house.img" :src="house.img.split(',')[0]" mode=""></image>
				<image class="hlist_img" v-if="!house.img" src="../../static/img/10.jpg" mode=""></image>
				<view class="hlist_right">
			 	 <view class="hlist_title">
					<text v-if="house.typeId == 1">住宅</text>
					<text v-if="house.typeId == 2">店铺</text>
					<text v-if="house.typeId == 3">厂房</text>
					<text v-if="house.typeId == 4">仓库</text>
					<text>-{{house.addCopIdName}}</text>
					 -{{house.buildingName}}</view>
					<view class="hlist_title" style="margin-top: 5rpx;">{{house.area}}㎡
						<text v-if="house.typeId == 1">-{{house.shiCount}}室{{house.tingCount}}厅{{house.wei}}卫</text>
					</view>
					<view class="hlist_position">{{house.address}}</view>
					<view class="hlist_tag">
						<view class="hlist_tag_inner" v-for="(item,index) in house.highLightArr" :key="index">{{item}}</view>
					</view>
					<!-- <view class="hlist_price">￥{{house.unitPrice}}/月</view> -->
					<view class="hlist_price" v-if="house.unitPrice">￥{{house.unitPrice}}/月</view>
					<view class="hlist_price" v-else>价格:面谈</view>
				</view>
			</view>
		</view>
		<view class="dbottom">
			<view class="dbottom_info">
				<image class="dbottom_info_icon" src="../../static/img/share.png" mode=""></image>
				<button type="default" class="dbottom_info_text" style="border: none !important;background-color: #FFFFFF;height: 30px;margin: 0!important;padding: 0;" open-type="share">分享</button>
			</view>
			<view class="dbottom_info">
				<image class="dbottom_info_icon" v-if="!isCollected" @click="collect" src="../../static/img/shoucang.png" mode=""></image>
				<image class="dbottom_info_icon" v-if="isCollected" @click="cancelCollect" src="../../static/img/collected.png" mode=""></image>
				<view class="dbottom_info_text">收藏</view>
			</view>
			<view class="dlink" @tap="makePhone">联系看房</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: '',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				detailId: '',
				detail: {},
				imgList: [],
				highlightsList: [],
				highlightAll: [],
				collectList: [],
				isCollected: false,
				favId: '',
				houseList: [],
				orientationAll: [],
				orientationStr: "",
				payArr: [],
				isLogin: false,
				noImg: require("../../static/img/10.jpg")
			}
		},
		onLoad(option) {
			this.detailId = option.id
			if(uni.getStorageSync("token")){
				this.isLogin = true
				this.getCollectList()
			}
			this.addView()
		},
		// 分享小程序
		onShareAppMessage(res) {
			return {
				title: "精品好房源",
				path: '/pages/houseDetail/houseDetail?id=' + this.detailId
			}
		},
		onShow() {
			this.getSelect("house_orientation")
			this.getSelect("bright_points")
			this.getSelect("leasing_mode")
		},
		methods: {
			toIndex(){
				uni.navigateTo({
					url: '../index/index'
				})
			},
			//图片点击放大
			clickImg(index){
				let that = this
				wx.previewImage({
					urls: that.imgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: that.imgList[index], // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			//获取亮点
			getSelect(type){
				let that = this;
				that.$api.request('/api/dict/data/list','',{
					dictType: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					if(type == 'bright_points'){
						that.highlightAll = res.rows
						this.getDetail()
					}else if(type == 'house_orientation'){
						that.orientationAll = res.rows
					}else if(type == "leasing_mode"){
						that.payArr = res.rows
					}
				})
			},
			// 小区其他房源
			getList(){
				let that = this;
				let obj = {
					buildingName: that.detail.buildingName,
					id: that.detailId
				}
				that.$api.request('/api/web/relsaseList','',obj, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.houseList=res.rows;
					that.houseList.forEach((item,index) =>{
						that.houseList[index].highLightArr = []
						if(item.highlights){
							let arr = item.highlights.split(",")
							for(let i=0;i<arr.length;i++){
								for(let j=0;j<that.highlightAll.length;j++){
									if(arr[i] == that.highlightAll[j].dictCode){
										that.houseList[index].highLightArr.push(that.highlightAll[j].dictLabel)
									}
								}
							}
						}
					})
					// 整租合租显示处理
					that.houseList.forEach((item,index) =>{
						that.houseList[index].addCopIdName = ''
						that.payArr.forEach((arrItem,arrIndex) =>{
							if(arrItem.dictCode == item.addCopId){
								that.houseList[index].addCopIdName = arrItem.dictLabel
							}
						}) 
					})
				})
			},
			//获取收藏列表
			getCollectList(){
				let that = this;
				that.$api.request('/api/favorate/list','',{
					userId: uni.getStorageSync("userId"),
					type: 0
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.collectList = res.rows;
					that.isCollected = false
					that.collectList.forEach(item=>{
					    if(item.targetId == that.detailId){
					        that.isCollected = true
							that.favId = item.favId
					    }
					})
				})
			},
			
			// 拨打电话
			makePhone(){
				let that = this
				uni.makePhoneCall({
				    phoneNumber: that.detail.mobile, 
					success: (res) => {
					},
					fail: (res) => {
					}
				  });
			},
			//浏览记录
			addView(){
				let that = this;
				that.$api.request('/api/history/add','',{
					userId: uni.getStorageSync("userId"),
					targetid: that.detailId,
					type: 0
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
				})
			},
			//获取详情
			getDetail(){
				let that = this;
				that.$api.request('/api/web/houseDetail','',{
					id: that.detailId
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					if(res.data){
						that.detail = res.data
						that.payArr.forEach((arrItem,arrIndex) =>{
							if(arrItem.dictCode == that.detail.addCopId){
								that.detail.addCopIdName = arrItem.dictLabel
							}
						}) 
						this.getList()
						let index = that.orientationAll.find(ele => ele.dictCode == that.detail.orientation)
						that.orientationStr = index.dictLabel
						if(that.detail.img){
							that.imgList = that.detail.img.split(",")
						}
						that.highlightsList = []
						if(that.detail.highlights){
							let arr = that.detail.highlights.split(",")
							for(let i=0;i<arr.length;i++){
								for(let j=0;j<that.highlightAll.length;j++){
									if(arr[i] == that.highlightAll[j].dictCode){
										that.highlightsList.push(that.highlightAll[j].dictLabel)
									}
								}
							}
						}
					}else{
						uni.showModal({
						    title: '提示',
						    content: res.msg,
						    success: function (res) {
						        if (res.confirm) {
									uni.navigateBack()
						        } else if (res.cancel) {
									uni.navigateBack()
						        }
						    }
						});
					}
				})
			},
			toDetail(event){
				uni.navigateTo({
					url: '../houseDetail/houseDetail?id=' + event.currentTarget.dataset.id
				})
			},
			toMap(){
				let that = this
				let lat = that.detail.latitude
				let lang = that.detail.longitude
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lang),
					scale: 18
				})
			},
			open(){
				this.modalName = "share"
			},
			hideModal(){
				this.modalName = ""
			},
			// 收藏
			collect(){
				let that = this;
				if(!that.isLogin){
					uni.getUserProfile({
						desc:'Wexin',     // 这个参数是必须的
						success:res=>{
						   console.log("userRes",res)
						   uni.setStorageSync('nickName', res.userInfo.nickName);
						   uni.setStorageSync('avatarUrl', res.userInfo.avatarUrl);
						   uni.login({
								provider: 'weixin',
								success: (wxres => {
									console.log("wxres",wxres)
									that.$api.request('/api/web/wxlogin','',{
										code: wxres.code,
									}, failres => {
										uni.showToast({
											title: failres.msg,
											icon: "none"
										});
									}).then(res1 => {
										uni.setStorageSync('token', res1.data.token);
										uni.setStorageSync('openid', res1.data.openid);
										uni.setStorageSync('userId', res1.data.user.userId);
										that.isLogin = true
										that.getDetail()
										that.$api.request('/api/favorate/add','',{
											userId: uni.getStorageSync("userId"),
											targetId: that.detail.id,
											createIp: '1',
											type: 0
										}, failres => {
											uni.showToast({
												title: failres.msg,
												icon: "none"
											});
										}).then(res => {
											that.getDetail()
											that.getCollectList()
										})
									})
								})
							})
					   },
					   fail:err=>{
						   uni.showToast({
						   	title: "请先登录，才能进行收藏操作！",
						   	icon: "none"
						   });
					   }
					})
				}else{
					that.$api.request('/api/favorate/add','',{
						userId: uni.getStorageSync("userId"),
						targetId: that.detail.id,
						createIp: '1',
						type: 0,
					}, failres => {
						uni.showToast({
							title: failres.msg,
							icon: "none"
						});
					}).then(res => {
						that.getDetail()
						that.getCollectList()
					})
				}
				
			},
			// 取消收藏
			cancelCollect(){
				let that = this;
				that.$api.request('/api/favorate/remove','',{
					ids: that.favId,
					type: 0
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.getDetail()
					that.getCollectList()
				})
			}
		}
	}
</script>

<style lang="scss">
	.share_box{
		width: 50%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.share_icon{
			width: 60rpx;
			height: 60rpx;
		}
	}
	.content{
		background: #F3F6F8;
		padding-bottom: 50rpx;
		.to_index{
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			background-color: #3388FF;
			color: #FFFFFF;
			font-size: 28rpx;
			position: fixed;
			right: 0;
			bottom: 150rpx;
			border-radius: 50%;
		}
		.hbanner{
			width: 100%;
			height: 500rpx;
			.swiper{
				width: 100%;
				height: 100%;
			}
			.hbanner_img{
				width: 100%;
				height: 500rpx;
				overflow: hidden;
				position: relative;
				.hbanner_img_inner{
					width: 100%;
					height: 200%;
				}
			}
		}
		.hinfo{
			width: 96%;
			padding-left: 4%;
			background: #FFFFFF;
			.dtitle{
				font-size: 34rpx;
				font-weight: bold;
				padding-top: 20rpx;
			}
			.dprice{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				margin-top: 20rpx;
				.dprice_left{
					font-size: 32rpx;
				}
				.dprice_right{
					font-size: 32rpx;
					color: #333333;
					margin-right: 4%;
				}
			}
		}
		.d_info{
			width: 100%;
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.d_info_list{
				width: 25%;
				height: 100rpx;
				border-right: 1rpx solid #ebebeb;
				text-align: center;
				.d_info_title{
					font-size: 32rpx;
					color: #666666;
				}
				.d_info_number{
					font-size: 32rpx;
					color: #333333;
					margin-top: 10rpx;
					font-weight: bold;
				}
			}
		}
		.hlist_tag{
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.hlist_tag_inner{
				padding: 5rpx 20rpx;
				font-size: 28rpx;
				color: #666666;
				border-radius: 10rpx;
				margin-right: 20rpx;
				margin-top: 10rpx;
				border: 1rpx solid #999999;
			}
		}
		.person_info{
			width: 100%;
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 40rpx;
			.person_info_img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}
			.person_info_center{
				width: calc(100% - 160rpx);
				.person_name{
					font-size: 32rpx;
					color: #333333;
				}
				.person_desc{
					font-size: 28rpx;
					color: #CECDCD;
					margin-top: 10rpx;
				}
			}
			.right_arrow{
				width: 30rpx;
				height: 30rpx;
				margin-right: 30rpx;
			}
		}
		.dposition{
			width: 100%;
			background: #FFFFFF;
			margin: 20rpx 0;
			.dposition_title{
				font-size: 32rpx;
				font-weight: bold;
				padding: 30rpx 0;
				margin-left: 30rpx;
			}
			.dposition_info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 92%;
				margin: 0 auto;
				padding-bottom: 40rpx;
				.dposition_info_icon{
					width: 40rpx;
					height: 40rpx;
				}
				.dposition_address{
					width: calc(100% - 100rpx);
					font-size: 32rpx;
					color: #808182;
				}
				.dposition_right_arrow{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.ddesc{
			width: 100%;
			background: #FFFFFF;
			margin: 20rpx 0;
			padding-bottom: 40rpx;
			.ddesc_title{
				font-size: 36rpx;
				font-weight: bold;
				padding: 30rpx 0;
				margin-left: 30rpx;
			}
			.ddesc_info{
				margin-left: 30rpx;
				color: #333333;
				font-size: 32rpx;
				margin-bottom: 20rpx;
				line-height: 50rpx;
			}
		}
		.dlist{
			width: 100%;
			background: #FFFFFF;
			margin: 20rpx 0;
			padding-bottom: 40rpx;
			.dlist_title{
				font-size: 36rpx;
				font-weight: bold;
				padding: 30rpx 0;
				margin-left: 30rpx;
			}
			.hlist{
				width: 100%;
				margin: 0 auto;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #ebebeb;
				.hlist_img{
					width: 200rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
				}
				.hlist_right{
					margin-left: 20rpx;
					width: calc(100% - 230rpx);
					.hlist_title{
						font-size: 32rpx;
						color: #333333;
						margin-top: 20rpx;
					}
					.hlist_position{
						font-size: 28rpx;
						color: #CACACA;
						margin-top: 10rpx;
					}
					.hlist_tag{
						width: 100%;
						display: flex;
						align-items: center;
						margin-top: 10rpx;
						.hlist_tag_inner{
							background: #F2F2F2;
							padding: 5rpx 20rpx;
							font-size: 28rpx;
							color: #C9C8C9;
							border-radius: 10rpx;
							margin-right: 20rpx;
						}
					}
					.hlist_price{
						font-size: 36rpx;
						color: red;
					}
				}
			}
		}
		.dbottom{
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 1rpx solid #ebebeb;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			padding-top: 10rpx;
			.dbottom_info{
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				.dbottom_info_icon{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				.dbottom_info_text{
					font-size: 28rpx;
					border: none;
					line-height: 60rpx;
					border: none;
					background-color: #FFFFFF;
					border: 1rpx solid #FFFFFF;
				}
			}
			.dlink{
				background: #F43F3B;
				border-radius: 10rpx;
				color: #FFFFFF;
				padding: 20rpx 60rpx;
				font-size: 32rpx;
				margin-right: 30rpx;
			}
		}
	}
	.button::after{ 
		border: none; 
	}
	.dbottom_info_text::after{
		border: none; 
	}
</style>
